<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="小瓜事项.css">
    <title>小瓜事项</title>
</head>
<body>
    <header class="header">欢迎来到小瓜事项</header>
    <div class="main">
        <div class="content right">
            <fieldset class="title">
                <legend>欢迎添加新的事项哟 乖乖 啾咪！</legend>
            </fieldset>
            <div class="nav">
                <input type="text">
                <button>新建事项</button>
            </div>
            <div class="a">
                <div class="todo">
                    <h3>未完成</h3>
                </div>
                <div class="done">
                    <h3>已完成</h3>
                </div>
            </div>
        </div> 
    </div> 
</body>
<script>
    //1.实现新建任务功能
    //获取到新增按钮
    let addTaskButton = document.querySelector('.nav button');
    //给新增按钮注册一个点击事件
    addTaskButton.onclick = function() {
        //获取到输入框的内容
        let input = document.querySelector('.nav input');
        let taskContent = input.value;
        if (taskContent == '') {
            alert('乖乖，当前事项为空哟, 不能进行新增事项的呀!快去新建事项吧！');
            return;
        }
        //根据事项内容, 创建元素
        let row = document.createElement('div');
        row.className = 'row';
        let checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        let span = document.createElement('span');
        span.innerHTML = taskContent;
        let button = document.createElement('button');
        button.innerHTML = '删除';
        //把这些元素挂到 DOM 树上
        row.appendChild(checkbox);
        row.appendChild(span);
        row.appendChild(button);
        let todo = document.querySelector('.todo');
        todo.appendChild(row);
        //清空输入框
        input.value = '';
        //2.实现 "已完成功能". 针对 checkbox 新增一个点击事件处理函数
        checkbox.onclick = function() {
            // 操作 row 这个对象, 看是把 row 是放到 todo 还是放到 done 里
            // 根据 checkbox 的选中状态来判定
            if (checkbox.checked) {
                // 选中状态, 把 row 放到 done 里
                let target = document.querySelector('.done');
                target.appendChild(row);
            } else {
                // 未选中状态, 把 row 放到 todo 里
                let target = document.querySelector('.todo');
                target.appendChild(row);
            }
        }
        // 3. 实现 "删除" 功能, 针对删除按钮增加一个点击事件.
        button.onclick = function() {
            // 在这里, 要删除的是 row 这个元素 (child => row)
            // row 的 parent 可能是 todo, 也可能是 done
            // 可以直接通过 parentNode 属性获取到某个元素的父元素是谁. 
            let parent = row.parentNode;
            parent.removeChild(row);
        }
         
    }
</script>
</html>